<template>
	<view class="login-container">
		<view class="logo" >
			<image class="logo-image" src="../../static/images/logo.png" mode="widthFix"></image>
		</view>
		<h2>一言之美，贵于千金，商品一旦预定不能反悔！可提前联系17799900520（微信同号）了解商品后再预定</h2>
		<view class="login-input">
			<view class="header_div">
				<input class="phone_input-item" type="number" maxlength="11" v-model="phone" placeholder="手机号" />
				<view :class="[disabledCode==true?'code_text_tap':'code_text']" :disabled="disabledCode"
					@click="sendSMS()">{{codeText}}</view>
			</view>

			<input class="input-item" type="text" v-model="code" placeholder="验证码" />
		</view>
		<button class="login-btn_no" type="default" @click="verificationCode()">确认预定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: null,
				code: null,
				disabled: false,
				disabledCode: false,
				codeText: '获取验证码',
				show: false,
				commodityId: null,
				quantity: null,	
		
			}
		},
		created() {

			this.getcommodityId();
		},
		methods: {
			//根据url获取商品id
			getcommodityId() {
				this.commodityId = this.$route.query.id;
				this.quantity = this.$route.query.quantity;
			},
			
			//发送验证码
			sendSMS() {
				if(this.phone){
					const url = "http://localhost:8090/order/sendSMS/" + this.phone;
					uni.request({
						url: url,
						method: 'POST',
						header: {
							'content-type': 'application/json',
							'token': this.token
						},
						success: (res) => {
							uni.showToast({
								title: res.data.data,
								icon: 'success',
								duration: 2000
							});
						},
						fail: (err) => {
							console.error('短信发送失败：', err);
						}
					});
				} else{
					uni.showToast({
						title: "手机号格式不正确！",
						icon: 'error',
						duration: 2000
					});
				}
			},
			//点击确定预定后跳转回商品页面
			goto() {
				const url = "/pages/index/index";
				uni.switchTab({
					url: url,
				})
			},
			
			//校验验证码
			verificationCode(){
				const url = "http://localhost:8090/order/book/" + this.phone + "/" + this.code ;
				if(this.phone == null) {
					uni.showToast({
						title: "请输入手机号！",
						icon: 'error',
						duration: 2000
					});
				} else {
					uni.request({
						url: url,
						method: 'POST',
						header: {
							'content-type': 'application/json',
						},
						success: (res) => {
							console.log(res.data.code);
							if(res.data.code == 1) {
								uni.showToast({
									title: "商品预定成功！",
									icon: 'error',
									duration: 2000
								});
								this.sendSuccessSMS();
								
							} else {
								uni.showToast({
									title: "验证码错误，或已过期！",
									icon: 'error',
									duration: 2000
								});
								this.sendSuccessSMS();
							}
							
							
						},
						fail: (err) => {
							console.error('获取首页展示的商品列表请求失败：', err);
						}
					});
				}
			},
			
			//发送预定成功提醒短信
			sendSuccessSMS(){
				const url = "http://localhost:8090/order/sendSuccessSMS/" + this.phone + "/" + this.commodityId + "/" + this.quantity;
				uni.request({
				    url: url,
				    method: 'POST',
				    header: {
				        'content-type': 'application/json',
				        'token': this.token
				    },
				    success: (res) => {
				        console.log("已发送预订成功短信提醒！");
				        // 第二个请求在第一个请求成功后执行
				        const urlnew = "http://localhost:8090/order/";
				        uni.request({
				            url: urlnew,
				            method: 'POST',
				            data: {
				                commodity: this.commodityId,
				                number: this.quantity,
								buyer: this.phone,
				            },
				            header: {
				                'content-type': 'application/json', // 确保指定内容类型为 JSON
				                'token': this.token // 如果需要，也可以传递 token
				            },
				            success: (res) => {
				                console.log("新增订单成功!");
				            },
				            fail: (err) => {
				                console.error('新增订单失败', err);
				            }
				        });
				    },
				    fail: (err) => {
				        console.error('短信发送失败：', err);
				    }
				});
				this.goto();
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: rgba(245, 245, 245, 1);
	}
	
	.header_div {
		width: 100%;
	}

	.text_div {
		width: 95%;
	}

	.mott_div {
		width: 95%;
		position: fixed;
		bottom: 6px;
	}


	.send_code_div {
		float: left;
		width: 50%;
		background: rgba(255, 255, 255, 1);
	}

	.code_text {
		display: block;
		float: left;
		width: 35%;
		height: 106rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(102, 166, 255, 1);
		background: rgba(255, 255, 255, 1);
		line-height: 106rpx;
	}

	.code_text_tap {
		display: block;
		float: left;
		width: 35%;
		height: 106rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(102, 166, 255, 1);
		background: rgba(255, 255, 255, 1);
		line-height: 106rpx;
		pointer-events: none;
	}

	.login-container {
		width: 100%;
		height: 100%;
		background-image: url('https://web-tlias-mozi.oss-cn-beijing.aliyuncs.com/%E8%83%8C%E6%99%AF2.png'), linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
		background-size: cover;
		background-blend-mode: lighten;
		background-position: center center;
	}


	.login-input {
		width: calc(100% - 40rpx);
		overflow: hidden;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.phone_input-item {
		display: block;
		width: 53%;
		float: left;
		background: rgba(255, 255, 255, 1);
		border-radius: 4rpx;
		padding: 30rpx 40rpx;
		margin: 0 0 20rpx 0;
		line-height: 44rpx;
	}

	.input-item {
		width: 100%;
		height: 44rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 4rpx;
		padding: 30rpx 40rpx;
		margin: 0 0 20rpx 0;
		line-height: 44rpx;
	}


	.login-btn {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(136deg, rgba(102, 166, 255, 1) 0%, rgba(65, 136, 255, 1) 100%);
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.login-btn_no {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 0 auto;
		background-color: rgba(60, 156, 255, 1) !important;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.logo {
		margin-top: 0rpx;
		margin-bottom: 10rpx;
		position: relative;
		height: 80rpx;

		.logo-image {
			width: 350rpx;
			position: absolute;
			top: 50%;
			/* 文字顶部距离容器顶部的距离为容器高度的一半 */
			left: 50%;
			/* 文字左侧距离容器左侧的距离为容器宽度的一半 */
			transform: translate(-50%, -20%);
			/* 通过负的50%偏移来实现垂直和水平居中 */
		}
	}
</style>